<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>首页_无内容</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        body {
            background-color: #fff;
        }

        .top {
            background: url('../../image/home/home01.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 236px;
        }

        .input {
            height: 28px !important;
            width: 273px !important;
            border-radius: 12px !important;
            background-color: #fff !important;
            padding-left: 15px !important;
            top: 55px;
            float: right;
            right: 15px;
            font-size: 13px !important;
        }

        .test {
            position: relative;
        }

        .search img {
            position: absolute;
            right: 28px;
            top: 58px;
            width: 22px;
        }

        .list {
            height: 45px;
            background-color: #DAD9D9;
            font-size: 13px;
            line-height: 45px;
        }

        .child {
            width: 20%;
            text-align: center;
            float: left;
            color: #858585;
        }

        .childact {
            color: black;
        }

        .line {
            width: 68px;
            height: 3px;
            background-color: #FF722C;
            position: absolute;
            top: 41px;
            right: 50%;
            margin-right: -34px;
        }

        .img {
            float: left !important;
            width: 68px !important;
            height: 66px !important;
            border-radius: 50% !important;
            margin-top: 18px !important;
        }

        .text {
            width: 100%;
            text-align: center;
            margin-top: 25%;
        }

        .text img {
            width: 90px;
            margin: 0 auto;
            display: block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="vm">

        <div class="top">
            <div class="search">
                <input type="text" placeholder="输入搜索内容" class="input test">
                <img src="../../image/home/search.png" alt="">
            </div>
        </div>
        <div class="list">
            <div class="child test childact">最新歌曲<span class="line"></span></div>
            <div class="child test">热门推荐<span></span></div>
            <div class="child test">经典歌曲<span></span></div>
            <div class="child test">华语歌曲<span></span></div>
            <div class="child test">英文歌曲<span></span></div>
            <div class="aui-clearfix"></div>
        </div>
        <div class="text">
            <img src="../../image/home/cat_1.png" alt="">
            <div style="font-size:16px;color:#C8C8C8;margin-top:12px;">暂无内容</div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vm',
        data: {

        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

            }
        },
        methods: {
            init: function() {
                var _this = this;
            }
        }
    })


    // function OpenKefuWin() {
    //     api.openWin({
    //         name: './myself/kefu_win',
    //         url: './myself/kefu_win.html',
    //     });
    // }
    $(".child").click(function() {
        var index = $(this).index();
        $(this).addClass('childact');
        $(this).siblings().removeClass('childact');
        $(this).children('span').addClass('line');
        $(this).siblings().children('span').removeClass('line');
        // $('.tabel_list').addClass('hide');
        // $('.tabel_list').eq(index).removeClass('hide');
    });
</script>

</html>
